{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>    <!-- 3.7 需要jquery，并且 要在 引入bootstrap的css文件 之前 -->
    <link rel="stylesheet" href="{% static "rsync/bootstrap.min.css" %}">

    <script src="{% static "rsync/bootstrap.min.js" %}"></script>
    <script src="{% static "rsync/js/jquery.min.js" %}"></script>
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="{% static "js/2.11.5popper.min.js" %}"></script>

    <link rel="stylesheet" href="{% static "rsync/plugins/sweetalert/sweetalert.css" %}">

    <script src="{% static "rsync/plugins/sweetalert/sweetalert-dev.js" %}"></script>


    <style>

        div.haveTips {
            width: 120px;
            height: 40px;
            text-align: right;
            background-color: #fcfdfd;
            color: #e00d44;
            font-family: sans-serif;
            padding-top: 8px;
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            font-size: 17px;
        }

        div.haveTips::after {
            content: attr(tips);
            padding: 5px;
            background-color: #d207f1;
            box-shadow: 0 0 5px #39d010;
            color: white;

            text-align: center;
            border-radius: 5px;
            width: 450px;

            position: absolute;
            bottom: 100%;
            left: 100%;
            transform: translate(-17%, -10px);

            opacity: 0;
            transition: all 0.5s;
        }

        div.haveTips:hover::after {
            opacity: 1;
        }

        div.haveTips::before {
            content: '';
            width: 0;
            height: 0;
            border: 7px solid transparent;
            border-top-color: #033ef6;

            position: absolute;
            top: -7px;
            left: calc(50% - 6px);

            opacity: 0;
            transition: all 0.5s;
        }

        div.haveTips:hover::before {
            opacity: 1;
        }
    </style>

</head>
<body>
<div class="container">

    <div class="container-fluid">

        <div class="col-md-12">
            {% csrf_token %}
            <div class="panel panel-success">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <div style="font-size: 18px">
                        服务器: <span style="color: red" id="ip"> {{ ip }} </span>
                        &nbsp&nbsp&nbsp 鼠标放在 下面（当前目录）字 上有惊喜~~~

                        <span class="pull-right"><a class="pull-right" href="#"
                                                    onClick="javascript :history.back(-1);">返回上一页</a></span>
                    </div>
                </div>

                <div style="height: 10px"></div>

                <div class="col-lg pull-left">
                    <div class="haveTips" tips='需手动复制当前目录地址，在上一页地址栏里粘贴~~~ '>当前目录：</div>

                </div>

                <div class="col-lg-6 pull-left" style="padding-left: 1px">

                    <input type="text" class="form-control " value="{{ dir_path }}/">

                </div>

                <div class="col-lg-3 pull-right" style="margin-bottom: 10px">
                    <div class="input-group">
                        <input type="text" class="form-control" id="search" placeholder="关键字">
                        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" id="search_submit" dir_name="{{ dir }}">搜索</button>
          </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-3 -->

                <!-- Table -->
                <table class="table table-bordered" style="border:1px solid #ddd">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>文件类型</th>
                        <th>文件大小</th>
                        <th>文件时间</th>
                        <th>文件名</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in log_list %}
                        <tr>
                            <th scope="row">{{ forloop.counter }}</th>
                            <td>{{ item.type }}</td>
                            <td>{{ item.size }}</td>
                            <td>{{ item.time }}</td>
                            <td>{{ item.name }}</td>
                            <td>
                                {% if item.type == 'dir' %}
                                    {% if not dir %}
                                        <button type="button" class="btn btn-primary view_dir"
                                                dir_name="{{ item.name }}">
                                            进入
                                        </button>
                                    {% else %}
                                        <button type="button" class="btn btn-danger view_dir"
                                                dir_name="{{ dir }}/{{ item.name }}">
                                            进入
                                        </button>



                                    {% endif %}

                                {% else %}

                                    {% if item.view == '1' %}

                                    {% endif %}

                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% if not log_list %}
                <span style="color: red">结果为空</span>
            {% endif %}

            {#分页展示#}
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="{{ herf_prefix }}&page=1" aria-label="Previous"><span aria-hidden="true">首页</span></a>
                    </li>

                    {#has_previous 判断是否有上一页#}
                    {% if log_list.has_previous %}
                        {#previous_page_number 上一页的页码#}
                        <li><a href="{{ herf_prefix }}&page={{ log_list.previous_page_number }}"
                               aria-label="Previous"><span
                                aria-hidden="true">上一页</span></a></li>
                    {% else %}
                        {#class="disabled" 禁止用户点击#}
                        <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一页</span></a>
                        </li>
                    {% endif %}

                    {#遍历页码的列表#}
                    {% for i in pageRange %}
                        {#判断当前页码数等于底部页码时#}
                        {% if current_num == i %}
                            {#增加class,加深按钮#}
                            <li class="active"><a href="{{ herf_prefix }}&page={{ i }}">{{ i }}</a></li>
                        {% else %}
                            {#href参数为简写,它会自动获取当前路径，并拼接参数#}
                            <li><a href="{{ herf_prefix }}&page={{ i }}">{{ i }}</a></li>
                        {% endif %}

                    {% endfor %}

                    {#has_next 判断是否有下一页#}
                    {% if log_list.has_next %}
                        {#next_page_number 下一页的页码#}
                        <li><a href="{{ herf_prefix }}&page={{ log_list.next_page_number }}" aria-label="Next"><span
                                aria-hidden="true">下一页</span></a></li>
                    {% else %}
                        {#class="disabled" 禁止用户点击#}
                        <li class="disabled"><a href="" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>
                    {% endif %}

                    <li><a href="{{ herf_prefix }}&page={{ paginator.num_pages }}" aria-label="Next"><span
                            aria-hidden="true">最后一页</span></a></li>

                </ul>
            </nav>

            <script>


                $('.view_dir').click(function () {
                    let csrf = $("[name=csrfmiddlewaretoken]").val().trim();
                    let ip = $('#ip').text().trim();
                    let dir = $(this).attr('dir_name').trim();


                    $.ajax({  //发送ajax请求
                        url: '/rsyncpy/',
                        type: "post",
                        data: {
                            'ip': ip,
                            'dir': dir,
                            csrfmiddlewaretoken: csrf,
                        },
                        success: function (arg) {
                            arg = JSON.parse(arg);

                            if (arg.code == "200") { //判断json的状态

                                window.location.href = arg.url;
                            } else {
                                swal("失败！", arg.error, "error");
                            }
                        },
                        error: function () {
                            swal("失败！", "网络请求错误!", "error");
                        }
                    });
                });

                //搜索
                $('#search_submit').click(function () {
                    let csrf = $("[name=csrfmiddlewaretoken]").val();
                    let ip = $('#ip').text().trim();
                    let dir = $(this).attr('dir_name').trim();
                    let key = $('#search').val().trim();
                    if (key.length == 0) {
                        swal("错误！", "关键字不能为空!", "error");
                        return false
                    }
                    console.log("搜索", ip, dir, key);
                    // 发送ajax请求
                    $.ajax({  //发送ajax请求
                        url: '/rsyncpy/',
                        type: "post",
                        data: {
                            'ip': ip,
                            'dir': dir,
                            'key': key,
                            csrfmiddlewaretoken: csrf,
                        },
                        success: function (arg) {
                            arg = JSON.parse(arg);

                            if (arg.code == "200") { //判断json的状态

                                window.location.href = arg.url;
                            } else {
                                swal("失败！", arg.error, "error");
                            }
                        },
                        error: function () {
                            swal("失败！", "网络请求错误!", "error");
                        }
                    });
                });


            </script>
        </div>
    </div>
</div>
</body>


</html>